<%@ page import="pojo.Dishes" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/dish.css"/>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    // 加按钮
    $(document).ready(function(){
        $(".add_button").each(function(i,obj){
            $(obj).click(function(){
                var a=$(".order_num")[i].value
                $(".order_num")[i].value=Number(a)+1
            })
        })
    })


    // $(".price").each(function(i,obj){
    //     console.log(obj.innerHTML)
    // })

    //减按钮
    $(document).ready(function(){
        $(".des_button").each(function(i,obj){
            $(obj).click(function(){
                var a=$(".order_num")[i].value
                if(a>0)
                    $(".order_num")[i].value=Number(a)-1
            })
        })
    })

    // 计算单件总价


    $(document).ready(function(){
        $(".add_button").each(function(i,obj){
            $(obj).click(function(){
                var price=Number($(".price")[i].innerHTML);
                var num=Number($(".order_num")[i].value);
                $(".tol_price")[i].value=num*price;
            })
        })
    })

    $(document).ready(function(){
        $(".des_button").each(function(i,obj){
            $(obj).click(function(){
                var price=Number($(".price")[i].innerHTML);
                var num=Number($(".order_num")[i].value);
                $(".tol_price")[i].value=num*price;
            })
        })
    })

    // 计算所有总价

    $(document).ready(function(){
        $(".add_button").each(function(i,obj){
            $(obj).click(function(){
                var sum=calcALL()
                $("#sumAll")[0].value=sum
            })
        })
    })

    $(document).ready(function(){
        $(".des_button").each(function(i,obj){
            $(obj).click(function(){
                var sum=calcALL()
                $("#sumAll")[0].value=sum
            })
        })
    })

    function calcALL(){
        var prices=$(".tol_price")
        var sum=0
        for(var i=0;i<prices.length;i++)
        {
            sum+=Number(prices[i].value)
        }
        return sum
    }

</script>
</head>
<title>Title</title>

<body>
<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="btn btn-secondary" href="business_View.jsp" role="button">返回</a>
        <button class="btn btn-primary" type="submit">下单</button>
    </div>

</nav>

<form action="orderServlet.do" method="get">
    <% int i=0;
        List<Dishes> dishes=(List<Dishes> )session.getAttribute("dishes");
        for (Dishes dish:dishes){
    %>
    <div class="container" >
        <div class="row dish_div">
            <div class="col ">
                <img src="img/<%=dish.getDi_name()%>.jpg" class="dish_img"/>
            </div>
            <div class="col" style="margin: auto;">
                <p><%=dish.getDi_name()%></p>
            </div>
            <div class="col" style="margin: auto;">
                <p>单价</p>
                <p class="price"><%=dish.getDi_price()%></p>
            </div>
            <div class="col" style="margin: auto;">
                <button class="des_button" type="button" style="width: 30px;">-</button>
                <!-- <input type="text" placeholder="普通输入框"> -->
    <%--            <input type="text" class="order_num">0</input>--%>
                <input type="text" name="order_num<%=i%>" class="dish_msg order_num" style="width: 2.5rem;text-align: center;" value="0" readonly="readonly"/>
                <!-- <input id="order_num" class="dish_msg" type="text" value="0" align="center" style="width: 2.5rem;text-align: center;" onkeyup = "value=value.replace(/[^\d]/g,'')" onblur="changeValue(this)"/> -->
                <button class="add_button"  type="button" style="width: 30px;">+</button>
            </div>
            <div class="col" style="margin: auto;">
                <h5>金额</h5>
<%--                <i class="tol_price">0</i>--%>
                <input type="text" name="tol_price<%=i%>" class="dish_msg tol_price" style="width: 2.5rem;text-align: center;" value="0" readonly="readonly"/>
                <!-- <input class="tol_price" class="dish_msg" type="text" value="0" align="center" style="width: 2.5rem;text-align: center;" readonly="readonly"/> -->
            </div>
        </div>
    </div>

            <%
                    i++;
                }
            %>
        </div>
    </div>



    <div class="container">
        <div class="row">
            <div class="col" style="margin-top: 20px;">
                <h5>总计</h5>
<%--                <h6 id="sumAll" name="">0</h6>--%>
                <input type="text" id="sumAll" name="sumAll" class="dish_msg" style="width: 2.5rem;text-align: center;" readonly="readonly" value="0">
            </div>
            <div class="col">
                <button class="btn btn-primary" type="submit" style="margin-top: 20px;">下单</button>
            </div>
        </div>
    </div>
</form>
</body>
</html>
